<template>
  <div>
    <el-menu
        default-active=""
        class="el-menu-type"
        :text-color="color"
        :active-text-color="activeColor"
        :background-color='backgroundColor'
        >
        <el-menu-item v-for="(item,key) in type" :index="item.value" :key="key" @click="chooseType(item)">{{item.label}}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import NavMenu from '~/components/NavMenu'
import { gameType } from '~/static/data/type.js'
export default {
  components: {
    NavMenu
  },
  data () {
    return {
    }
  },
  props: {
    type: {
      default: () => { return gameType }
    },
    color: {
      default: '#333'
    },
    activeColor: {
      default: '#e91e63'
    },
    backgroundColor: ''
  },
  methods: {
    emit (callback, params) {
      this.$emit(callback, params)
    },
    chooseType (item) {
      this.$emit('changeType', { status: false, chooseData: item })
    }
  },
  created () {
  }
}

//   watch: {
//     $route () {
//       this.handleActived()
//     }
//   },
//   methods: {
//     openNav (index, indexpath) {
//       this.activeSub = index
//     },
//     closeNav (index, indexpath) {
//       this.activeSub = ''
//     },
//     changeNav (index, indexpath) {
//       this.activeIndex = index
//       this.$router.push({ path: index })
//       sessionStorage.setItem('activeName', index)
//       if (index === '/') {
//         sessionStorage.setItem('activeSub', '')
//       } else {
//         sessionStorage.setItem('activeSub', this.activeSub)
//       }
//     },
//     handleActived () {
//       this.$nextTick(() => {
//         const path = this.$route.path
//         console.log(path)
//         this.activeIndex = path
//         // .split('/').slice(0, 2).join('/')
//       })
//     }
//   },
//   computed: {
//     breadcub () {
//       return this.$store.state.breadcumb.datas
//     }
//   },
//   mounted () {
//     this.handleActived()
//   }
// }
</script>
<style>

</style>
